<template>
  <div class="app-container">
    <!-- 基本信息 -->
      <div class="ci">
          <div class="item">
            <span class="name">机构名称</span>
            <span class="value">{{shop.ShopName}}</span>
          </div>
          <div class="item">
            <span class="name">Logo</span>
            <span class="value">
              <el-image  style="width: 45px; height: 45px" :src="shop.ShopLogo"  :preview-src-list="shop.ShopLogoPreviews">
              </el-image>
            </span>
          </div>
          <div class="item">
            <span class="name">联系电话</span>
            <span class="value">{{shop.ShopPhone}}</span>
          </div>
          <div class="item h100">
            <span class="name">展示图片</span>
            <span class="value pics">
                <div class="pic" v-for="(item,index) in shop.ShopPictrues" :key="index">
                 <el-image  style="width: 90px; height: 90px" :src="item"  :preview-src-list="shop.ShopPictruesPreviews">
                </el-image>
               </div>
            </span>
          </div>
          <div class="item">
            <span class="name">简介</span>
            <span class="value">{{shop.Introduce}}</span>
          </div>
          <div class="item">
            <span class="name">地址</span>
            <span class="value">{{shop.Address}}</span>
          </div>
          <div class="item">
            <span class="name">位置坐标（经纬度）</span>
            <span class="value"><a style="color:#1890ff" title="打开高德地图" :href="'https://www.amap.com/regeo?lng='+shop.Longitude+'&lat='+shop.Latitude" target="_blank">{{shop.GeoLocation}}</a>

            </span>
          </div>
          
      </div>
    <!-- end 基本信息 -->

    <!-- 私密信息 -->
    <div class="ci">
        <div class="item">
            <span class="name">营业执照号</span>
            <span class="value">{{shop.BusLicenseNum}}</span>
          </div>
        <div class="item">
            <span class="name">营业执照图</span>
            <span class="value">
              <el-image  style="width: 45px; height: 40px" :src="shop.BusLicenseImg"  :preview-src-list="shop.BusLicenseImgPreviews">
                </el-image>
            </span>
          </div>
        <div class="item">
          <span class="name">法人姓名</span>
          <span class="value">{{shop.LegalName}}</span>
        </div>
        <div class="item">
          <span class="name">法人身份证号</span>
          <span class="value">{{shop.IdCardNum}}</span>
        </div>
        <div class="item h100">
          <span class="name">法人身份证图</span>
          <span class="value">
            <div class="pic" v-for="(item,index) in shop.LegaIdCardImgs" :key="index">
                 <el-image  style="width: 90px; height: 90px" :src="item"  :preview-src-list="shop.LegaIdCardImgsPreviews">
                </el-image>
               </div>
          </span>
        </div>
        <div class="item">
          <span class="name">支付宝账号（用于提现）</span>
          <span class="value">{{shop.AliPayAccount}}</span>
        </div>
        <div class="item">
          <span class="name">店铺状态</span>
          <span class="value">
            <el-tag v-if="shop.Type==1 || shop.Type==2" :type="(shop.IsOpen?'success':'info')" effect="dark" style="margin-left:5px;">{{ (shop.IsOpen?'正常':'已关店') }}</el-tag>
            <el-tag :type="(shop.Type==0?'info':(shop.Type==3?'danger':'success'))" effect="dark"  style="margin-left:5px;">{{ shop.Type | filterShopType  }}</el-tag>
          </span>
        </div>
    </div>
    <div class="ci" v-show="shop.Type==1 || shop.Type==2">
       <div class="item btns">
            <span class="name"></span>
            <span class="value">
            <el-button type="primary" @click="openFixWindow()">修正经纬度</el-button>
            <el-popconfirm :title="'确定要'+(shop.IsOpen?'关闭':'恢复')+'这个店铺吗？'" icon="el-icon-info"  icon-color="red"  @onConfirm="saveOpenState(!shop.IsOpen)" >
                <el-button :type="(shop.IsOpen?'danger':'warning')" size="small" slot="reference" style="margin-left:5px;" :loading="stateloading">
                    {{(shop.IsOpen?'关闭店铺':'恢复店铺')}}
                </el-button>
            </el-popconfirm>
            </span>
      </div>
    </div>
    <!-- end 私密信息 -->
    <el-dialog title="修正店铺经纬度" :visible.sync="dialog.visible"  width="700px">
        <div class="ci">
          <div class="item">
              <span class="name required">当前经纬度：</span>
              <span class="value">
                 {{shop.GeoLocation}}
              </span>
          </div>
          <div class="item">
            <span class="name required">经度</span>
            <span class="value">
              <el-input clearable type="number" v-model="dialog.data.longitude"  placeholder="新经度" style="width: 200px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">纬度</span>
            <span class="value">
              <el-input clearable type="number" v-model="dialog.data.latitude"   placeholder="新纬度" style="width: 200px;"></el-input>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="saveGeoInfo()" :loading="dialog.saveloading">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>

import draggable from 'vuedraggable'
import * as shopApi from '@/api/shop'
import * as uploadApi from '@/api/upload'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'
import guid from '@/utils/guid'
import * as auth from '@/utils/auth'
import BxImage from '@/components/BxImage'
import * as fileUpload from '@/utils/fileupload'

export default {
  name: 'ShopDetails',
  components: {
    draggable,
    BxImage
  },
  data(){
    return{
      stateloading:false,
      shop:{
        ID:'',
        ShopName:'',
        ShopLogo:'',
        ShopPhone:'',
        ShopLogoPreviews:null, //注意，这个初始必须为null
        ShopPictrues:null,
        ShopPictruesPreviews:null,
        Introduce:'',
        Address:'',
        GeoLocation:'',
        Longitude:'',
        Latitude:'',
        IsOpen:true,
        Type:0,

        //私密信息
        AliPayAccount:'',
        BusLicenseNum:'',
        BusLicenseImg:'',
        BusLicenseImgPreviews:null,
        LegalName:'',
        LegaIdCardImgs:null,
        LegaIdCardImgsPreviews:null,
        idCardNum:'',
      },
      dialog:{
        saveloading:false,
        visible:false,
        data:{
          longitude:'',
          latitude:''
        }
      }
    }
  },
  mounted(){
    var that=this;
    var token=auth.getToken();
    var id=that.$route.params && that.$route.params.id;

    that.shop.ID=id;
    //加载机构信息
    shopApi.getShopInfo({id:id}).then((res)=>{
        this.shop.ID=res.data.id;
        this.shop.ShopName=res.data.shopName;
        this.shop.ShopLogo=imageHelper.GetFullUrl(res.data.shopLogo,200,200);
        this.shop.ShopLogoOrigin=res.data.shopLogo;
        this.shop.ShopLogoPreviews=[imageHelper.GetFullUrl(res.data.shopLogo,700,700)];
        this.shop.ShopPhone=res.data.shopPhone;
        this.shop.IsOpen=res.data.isOpen;
        this.shop.Type=res.data.type;
        //机构展示图片
        this.shop.ShopPictrues=[];
        this.shop.ShopPictruesPreviews=[];
        this.shop.ShopPictruesOrigin=[];
        if(res.data.mainImg1){
          this.shop.ShopPictrues.push(imageHelper.GetFullUrl(res.data.mainImg1,200,200));
          this.shop.ShopPictruesPreviews.push(imageHelper.GetFullUrl(res.data.mainImg1,0,0));
          this.shop.ShopPictruesOrigin.push(res.data.mainImg1);
        }
        if(res.data.mainImg2){
          this.shop.ShopPictrues.push(imageHelper.GetFullUrl(res.data.mainImg2,200,200));
          this.shop.ShopPictruesPreviews.push(imageHelper.GetFullUrl(res.data.mainImg2,0,0));
          this.shop.ShopPictruesOrigin.push(res.data.mainImg2);
        }
        if(res.data.mainImg3){
          this.shop.ShopPictrues.push(imageHelper.GetFullUrl(res.data.mainImg3,200,200));
          this.shop.ShopPictruesPreviews.push(imageHelper.GetFullUrl(res.data.mainImg3,0,0));
          this.shop.ShopPictruesOrigin.push(res.data.mainImg3);
        }
        //简介
        this.shop.Introduce=res.data.introduce;
        this.shop.Address=res.data.address;
        this.shop.Longitude=res.data.longitude;
        this.shop.Latitude=res.data.latitude;
        this.shop.GeoLocation=((res.data.longitude || '')+","+ (res.data.latitude || ''));
        if(this.shop.GeoLocation.length==1){this.shop.GeoLocation="";}

        //私密信息
        //支付宝
        this.shop.AliPayAccount=res.data.aliPayAccount;
        //营业执照
        this.shop.BusLicenseNum=res.data.busLicenseNum;
        imageHelper.GetPrivateUrl(res.data.busLicenseImg,700,700,token).then(res=>{
          this.shop.BusLicenseImg=res.data;
          this.shop.BusLicenseImgPreviews=[res.data];
        });
        

        //法人信息
        this.shop.LegalName=res.data.legalName;
        this.shop.LegaIdCardImgs=[];
        this.shop.LegaIdCardImgsPreviews=[];
        if(res.data.legaIdCardImg){
          imageHelper.GetPrivateUrl(res.data.legaIdCardImg,700,700,token).then(res=>{
            this.shop.LegaIdCardImgs.push(res.data);
            this.shop.LegaIdCardImgsPreviews.push(res.data);
          });
          
        }
        if(res.data.legaIdCardImgbak){
          imageHelper.GetPrivateUrl(res.data.legaIdCardImg,700,700,token).then(res=>{
            this.shop.LegaIdCardImgs.push(res.data);
            this.shop.LegaIdCardImgsPreviews.push(res.data);
          });
        }
        //身份证号
        this.shop.IdCardNum=res.data.idCardNum;



    });

    
  },
  filters:{
    filterShopType(val){
      return enumHelper.shop.shopType.getName(val);
    }
  },
  methods: {
    saveOpenState(state){
        var that=this;
        that.stateloading=true;
        shopApi.setOpenState({id:that.shop.ID,isOpen:state}).then(res=>{
            if(res.data){
                that.$message({
                    message: (state?'恢复成功':'已成功关店'),
                    type: 'success'
                });
                that.shop.IsOpen=state;
            }
            setTimeout(()=>{
                that.stateloading=false;
            },500)
            
        }).catch(()=>{
            that.stateloading=false;
        })
    },
    openFixWindow(){
      this.dialog.saveloading=false;
      this.dialog.visible=true;
      this.dialog.data.latitude='';
      this.dialog.data.longitude='';
    },
    saveGeoInfo(){
      var that=this;
      if(!that.dialog.data.longitude.trim() || !that.dialog.data.longitude.trim()){
          that.$message({
              message: '请输入经纬度',
              type: 'warning'
          });
          return;
      }
      that.dialog.saveloading=true;
      shopApi.updateGEOInfo({shopid:that.shop.ID,lng:that.dialog.data.longitude,lat:that.dialog.data.latitude}).then(res=>{
        if(res.data){
          that.$message({
              message: '更新成功',
              type: 'success'
          });
        }
        that.shop.GeoLocation=that.dialog.data.longitude+","+that.dialog.data.latitude;
         setTimeout(()=>{
              that.dialog.saveloading=false;
              that.dialog.visible=false;
          },500)
      })
    }
  }
}
</script>

